<template>
    <Boxtitle class='rank'>
        <template #title>
            <p>热门景区排行</p>
        </template>
        <template #content>
            <div class="rank-title">
                <p>排名</p>
                <p>景区</p>
                <p>预约数量</p>
            </div>
            <div class="rank-content">
                <div class="list">
                    <p v-for="(item, index) in bgColor" key="index" :style="`background: ${item}`">NO.{{ index+1 }}</p>
                </div>
                <div class="charts" ref="charts"></div>
            </div>
        </template>
    </Boxtitle>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
import Boxtitle from './slot/boxtitle.vue';

let charts = ref()
let bgColor = ['coral', 'orange', 'yellowgreen', 'cornflowerblue', 'skyblue'];

// 百分比
var data = [80, 74, 61, 55, 49]
// label标题
var titlename = ['故宫', '长城', '泰山', '峨眉山', '九寨沟'];
// 具体数值
var valdata = [35483, 32234, 27234, 19523, 17345]
let option = {
    grid:{
        top: 5,
        bottom: 5,
        left: 55,
        right: 50
    },
    xAxis: {
        show: false
    },
    yAxis: [{
        show: true,
        data: titlename,
        inverse: true,
        axisLine: {
            show: false
        },
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            color: '#fff',
            fontSize: '15px'
        },
    }, {
        show: true,
        inverse: true,
        data: valdata,
        axisLabel: {
            textStyle: {
                fontSize: 12,
                color: '#fff',
            },
        },
        axisLine: {
            show: false
        },
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        },

    }],
    series: [{
        name: '条',
        type: 'bar',
        yAxisIndex: 0,
        data: data,
        barWidth: 25,
        itemStyle: {
            normal: {
                barBorderRadius: 30,
                color: function (params:any) {
                    var num = bgColor.length;
                    return bgColor[params.dataIndex % num]
                },
            }
        },
        label: {
            normal: {
                show: true,
                position: 'inside',
                formatter: '{c}%'
            }
        },
    }, {
        name: '框',
        type: 'bar',
        yAxisIndex: 1,
        barGap: '-100%',
        data: [100, 100, 100, 100, 100],
        barWidth: 30,
        itemStyle: {
            normal: {
                color: 'none',
                borderColor: '#00c1de',
                borderWidth: 3,
                barBorderRadius: 15,
            }
        }
    },]
};

onMounted(() => {
    let mychart = echarts.init(charts.value);
    mychart.setOption(option)
})
</script>

<style scoped type="scss">
.rank {
    flex: 1.2;

    p {
        padding-top: 10px;
    }

    .rank-title {
        display: flex;
        color: orange;
        background: url(../images/rankingChart-bg.png) no-repeat;
        background-size: 100% 100%;
        margin: 20px 10px 0;
        height: 45px;

        p:first-child {
            margin: 0 10px;
        }

        p:nth-child(2) {
            margin-left: 20px;
        }
    }

    .rank-content {
        display: flex;
        height: calc(100% - 135px);

        .list {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            margin: 0 10px;
            font-size: 18px;

            p {
                padding: 5px 10px;
                border-radius: 10px;
            }
        }

        .charts {
            width: 380px;
        }
    }

}</style>